{% extends 'base.html' %}
{% block titie %}
    主页
{% endblock %}
{% block link %}
    <script src="{{ url_for('static', filename='js/jquery-3.6.0.js') }}"></script>
{% endblock %}
{% block style %}
    <style>
        .body {
            font-family: 'Microsoft YaHei UI';
            font-size: 15px
        }

        .tools {
            display: inline-block;
            float: right;
        }

        .layui-btn-primary {
            border-color: #ffffff;
        }

        .link_break {
            display: inline-block;
            width: 60%;
            height: 30px;
            line-height: 30px;
            margin: 20px 10px;
        }

        .layui-card-header {
            font-size: 18px;
            padding: 15px 25px;
        }

        .link_break > .table {
            margin-left: 20px
        }

        .link_break > .table > .alink {
            display: inline-block;
            white-space: nowrap;
            padding: 0 20px;
        }

        .tools {
            height: 30px;
            line-height: 30px;
            margin: 20px 10px 20px 0;
        }
    </style>
{% endblock %}


{% block body %}
    <body>
    <div class="main layui-bg-gray" style="padding: 50px 0; height: auto">
        <div class="" style="padding: 20px 50px;">
            <div class="layui-row layui-col-space20">
                {% for foo in table %}
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div title="标题" class="layui-card-header title">{{ foo.title }}</div>
                            <div class="link_break">
                                <span class="table">
                                    <a class="alink" href="/sheet/{{ foo.id }}">
                                        <i class="layui-icon">&#xe63c;</i>
                                        主属性
                                    </a>
                                </span>

                                <span class="table">
                                    <a class="alink" href="/cross/{{ foo.id }}">
                                        <i class="layui-icon">&#xe63c;</i>
                                        交叉表
                                    </a>
                                </span>

                                <span class="table">
                                    <a class="alink" href="/charts/{{ foo.id }}">
                                        <i class="layui-icon">&#xe64a;</i>
                                        图表
                                    </a>
                                </span>
                            </div>


                            {% if g.user.is_superuser %}
                                <span title="上传人" style="margin-left: 30px"><i
                                        class="layui-icon">&#xe66f;</i>{{ foo.upload_user }}</span>

                                <div class="tools ">
                                    <button title="分配用户" id="attr_put" type="button"
                                            class="layui-btn layui-btn-primary layui-btn-sm">
                                        <a href="/distribute/{{ foo.id }}">
                                            <i class="layui-icon">&#xe608;</i>
                                        </a>
                                    </button>

                                    <button title="属性分组修改" id="attr_put" type="button"
                                            class="layui-btn layui-btn-primary layui-btn-sm">
                                        <a href="/cross/group/{{ foo.id }}">
                                            <i class="layui-icon">&#xe642;</i>
                                        </a>
                                    </button>

                                    <button title="删除" table-id="{{ foo.id }}" type="button"
                                            class="layui-btn layui-btn-primary layui-btn-sm del">
                                        <i class="layui-icon">&#xe640;</i>
                                    </button>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    </body>
{% endblock %}


{% block script %}
    <script>
        $(function () {
            $('.del').click(function () {
                console.log($(this))
                let title_id = $(this).attr('table-id')
                console.log(title_id)
                $.ajax({
                    url: "/del/" + title_id,
                    type: "PUT",
                    success: function (data) {
                        location.reload();
                    }
                });
            });
        });
    </script>
{% endblock %}